<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定示例</title>
    <style>
        #div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
    <script type="text/javascript">
        window.onload = function (params) {

            bind(document.getElementById('div'),'click',function(){
                console.log(this);
                alert(this);
            });


            //事件绑定兼容处理
            /*
                参数：
                    obj:绑定事件元素对象
                    eventStr:事件字符串，不带on
                    callBack:事件回调函数
            */
            function bind(obj,eventStr,callBack) {
                if(obj.addEventListener){
                    //回调函数callback的this是对象obj
                    obj.addEventListener(eventStr,callBack,false);
                }else{
                    //这里的回调函数callback的this是window对象，因为这里是浏览器在调用所以，我们本身无法是用fun.call()的方式将调用对象obj传入，但是可以
                    //使用匿名函数，然后自己在调用一次回调函数
                    obj.attachEvent('on'+eventStr,function () {
                        callBack.call(obj);
                    });
                }
            }
        }    
    </script>
</head>
<body>
    <div id="div"></div>
</body>
</html>